<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .d {
            margin-bottom: 30px;
        }

        .container {
            width: 100%;
            height: 100%;
        }

        .container .x {
            width: 600px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -300px;
            margin-top: -200px;
        }

        .header {
            width: 100%;
            display: flex;
            font-size: 30px;
            align-items: center;
            color: #666666;
        }

        .header_1 {
            width: 100%;
            display: flex;
            font-size: 30px;
            align-items: center;
            color: #666666;
            font-weight: bold;
        }

        .form_content {
            width: 100%;
        }

        .xx {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .a {
            display: flex;
            font-size: 15px;
            color: slategrey;
            margin-right: 5px;
        }

        #aa {
            margin-left: 14px;
        }

        #pwd {
            margin-right: 5px;
            height: 25px;
            width: 200px;
            border-radius: 4px;
            border: 1.5px solid gainsboro;
        }

        #tel {
            margin-right: 5px;
            height: 25px;
            width: 200px;
            border-radius: 4px;
            border: 1.5px solid gainsboro;
        }

        #cdkey {
            width: 90px;
            height: 25px;
            margin-right: 20px;
            border-radius: 4px;
            border: 1.5px solid gainsboro;
        }

        #checkbox {
            margin-left: 60px;
        }

        #i_agree {
            margin-left: 60px;
            height: 30px;
            color: white;
            background-color: orange;
            border: none;
            margin-right: 10px;
        }

        .goto {
            text-decoration: none;
            font-size: 10px;
            color: blue;
            margin-left: 5px;
        }

        #button {
            background-color: blue;
            border: none;
            height: 20px;
            width: 80px;
            color: white;
            font-size: 10px;
        }
        .b{
            display: flex;
            justify-content: center;
            font-size: 10px;
            color: slategrey;
        }
        .b a {
            display: flex;
            font-size: 10px;
            justify-content: center;
            color: slategrey;

        }

        .c {
            color: red;
        }

    </style>
</head>
<body>
<div class="container">
    <form id="login_form">
        <div class="x">
            <div class="header" onmouseover="this.className='header_1'" onmouseout="this.className='header'">
                账号注册
            </div>
            <hr class="d">
            <div class="form_content">
                <div class="xx">
                    <div class="a">手机号码</div>
                    <input type="tel" id="tel" placeholder="请输入手机号码">
                    <div class="b">可用于激活码获取，密码找回，订单查询等</div>
                </div>
                <div class="xx">
                    <div class="a">登陆密码</div>
                    <input type="password" id="pwd" placeholder="请输入登陆密码">
                </div>
                <div class="xx">
                    <div class="a" id="aa">激活码</div>
                    <input type="text" id="cdkey" placeholder="请输入激活码">
                    <button id="button">获取激活码</button>
                </div>
                <div class="xx">
                    <input type="checkbox" checked id="checkbox">
                    <div class="b">我已阅读并同意遵守</div>
                    <a href="" class="goto">《用户服务协议》</a>
                </div>
                <div class="xx">
                    <button id="i_agree">同意协议并注册</button>
                    <div class="b">使用</div>
                    <a href="" class="goto">邮箱注册</a>
                </div>
            </div>
            <hr class="d">
            <div class="footer">
                <div class="b">
                    <a href="">投资者关系&nbsp&nbsp|&nbsp&nbsp</a>
                    <a href="">酒店加盟&nbsp&nbsp|&nbsp&nbsp</a>
                    <a href="">业务合作&nbsp&nbsp|&nbsp&nbsp</a>
                    <a href="">加入我们&nbsp&nbsp|</a>
                    <div class="c">
                        <a href="" style="color: red">&nbsp&nbsp我要投诉&nbsp&nbsp</a>
                    </div>
                    <a href="">|&nbsp&nbsp安全中心&nbsp&nbsp|&nbsp&nbsp</a>
                    <a href="">About us</a>
                </div>
                <div class="b">Copyright @2016 京ICP..... 电话1234567</div>
            </div>
        </div>
    </form>
</div>
</body>
</html>
